<template>
<div class="wrap w-fenlei detail">
    <main class="position-box">
    <cube-scroll
    ref="scroll"
    :data="items"
    :options="options"
    @pulling-up="onPullingUp"
    >  

    <header>
        <img onclick="javascript :history.back(-1);" src="@/assets/img/r_w.png" alt="" />
        单分类
    </header>
    <div class="head">
        <div class="box">
            <h3>{{bid_name}}</h3>
            <div class="items clearfix">
                <div class="item">
                    <span>{{title_num}}</span>
                    <p>已完成</p>
                </div>
                <div class="item">
                    <span>{{title_price}}</span>
                    <p>金额</p>
                </div>
                <div class="item">
                    <span>{{title_date}}</span>
                    <p>进行中</p>
                </div>
            </div>
        </div>
    </div>
    <div class="tab">
        <div class="tit clearfix">
            <div :class="tab == 20?tab_class:tab_class_no" @click="tabChange" data-tab="20">
                <p>
                    <span>招标中</span>
                </p>
            </div>
            <div :class="tab == 70?tab_class:tab_class_no" @click="tabChange" data-tab="70">
                <p>
                    <span>已成交</span>
                </p>
            </div>
            <div :class="tab == 100?tab_class:tab_class_no" @click="tabChange" data-tab="100">
                <p>
                    <span>已报名</span>
                </p>
            </div>
        </div>
        <div class="con con1" v-if="tab == 20" v-for="(val,index) in bidBeing">
            <div class="item" :data-bidid="val.bid_id" @click="toDetail">
                <div class="name clearfix">
                    <div class="flag">{{val.bid_type}}</div>
                    <h3>{{val.bid_name}}</h3>
                    <button @click.stop="enrollBid" :data-bidid="val.bid_id" :data-id="index" v-if="!val.is_enlist">
                      立即报名
                    </button>
                    <button disabled="disabled" v-else>
                      已报名
                    </button>
                </div>
                <div class="text">
                    <!--上下三角-->
                    <div :class="!val.show_remark ? 'font' : 'font show-text'">
                    {{val.bid_remark}}
                    </div>
                    <div :class="!val.show_remark ? 'icon' : 'icon show-text'" @click.stop="showTxt(index)">
                        <img :src="!val.show_remark ? up_img : down_img" alt="" />
                    </div>
                </div>
                <div class="infos clearfix">
                    <div class="left">
                        {{val.countDown}}
                    </div>
                    <div class="right">
                        <div class="list">
                            发布者：{{val.bid_user_company}}
                        </div>
                        <div class="list">
                            竞标人数：{{val.bid_enlist_num}}
                        </div>
                        <div class="list">
                            位置：{{val.city_id}}
                        </div>
                        <div class="list">
                            日期：{{val.time}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="con con1 con2 con3" v-if="tab == 70" v-for="(val,index) in bidDone">
            <div class="item" :data-bidid="val.bid_id" @click="toDetail">
                <div class="name clearfix">
                    <div class="flag">{{val.bid_type}}</div>
                    <h3>{{val.bid_name}}</h3>
                </div>
                <div class="text">
                    <!--上下三角-->
                    <div :class="!val.show_remark ? 'font' : 'font show-text'">
                    {{val.bid_remark}}
                    </div>
                    <div :class="!val.show_remark ? 'icon' : 'icon show-text'" @click.stop="showTxt(index)">
                        <img :src="!val.show_remark ? up_img : down_img" alt="" />
                    </div>
                </div>
                <div class="infos clearfix">
                    <div class="right">
                        <div class="list">
                            发布者：{{val.bid_user_company}}
                        </div>
                        <div class="list">
                            竞标人数：{{val.bid_enlist_num}}
                        </div>
                        <div class="list">
                            位置：{{val.city_id}}
                        </div>
                        <div class="list">
                            日期：{{val.time}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="con con1 con2 con3" v-if="tab == 100" v-for="(val,index) in bidColl">
            <div class="item" :data-bidid="val.bid_id" @click="toDetail">
                <div class="name clearfix">
                    <div class="flag">{{val.bid_type}}</div>
                    <h3>{{val.bid_name}}</h3>
                </div>
                <div class="text">
                    <!--上下三角-->
                    <div :class="!val.show_remark ? 'font' : 'font show-text'">
                    {{val.bid_remark}}
                    </div>
                    <div :class="!val.show_remark ? 'icon' : 'icon show-text'" @click.stop="showTxt(index)">
                        <img :src="!val.show_remark ? up_img : down_img" alt="" />
                    </div>
                </div>
                <div class="infos clearfix">
                    <div class="right">
                        <div class="list">
                            发布者：{{val.bid_user_company}}
                        </div>
                        <div class="list">
                            竞标人数：{{val.bid_enlist_num}}
                        </div>
                        <div class="list">
                            位置：{{val.city_id}}
                        </div>
                        <div class="list">
                            日期：{{val.time}}
                        </div>
                    </div>
                </div>
            </div>
         </div>

      </div>

    </cube-scroll>
  </main>

</div>

</template>
<script>

//上三角 ，下三角
import up_img from '@/assets/img/up.png'
import down_img from '@/assets/img/down.png'

export default {
  data(){
    return{
        tab:20,//tab 20 招标中 70已完成，100 已收藏
        tabIndex: 1,
        bidtype:0, //单品类id

        bid_name: '',  //页面标题
        title_num: '',  // 已完成单数
        title_price: '',  //金额
        title_date: '',   //最快完成时间


        bidBeing: {},//已发布
        bidDone: {},//已完成
        bidColl: {},//已报名
        bidBeingPage:1,
        bidDonePage:1,
        bidCollPage:1,
        userInfo:'',
        listData:[],
        downTime:'',//倒计时

        //样式
        tab_class_no:'tt',
        tab_class:'tt act',
        
        //上下三角
        down_img:down_img,
        up_img:up_img,

         //上拉加载，下拉刷新
        items:[],
         options: {
              // 配置下拉刷新 
              //pullDownRefresh:false,
              // pullDownRefresh: {
              //     threshold: 60,
              //     stop: 40,
              //     txt:'刷新'
              // }, 
              // 配置上拉加载更多 
              pullUpLoad: {
                  threshold: 0,
                  txt: {
                      more: '加载更多',
                      noMore: '没有更多数据'
                  }
              }
              // 配置上拉加载，若要关闭可直接 pullUpLoad：false
          },
          
     }
  },
  async created(){
       this.bidtype = this.$route.query.bidtype
       let user_token = this.getUserToken()
       let re = await this.$axios.post('index/typeBidList',{
                user_token:user_token,
                bidtype:this.bidtype
       })
       if(re.code == 200){
                this.bid_name = re.data.bid_type //页面标题
                this.title_num = re.data.total.total_bid_done // 已完成单数
                this.title_price = re.data.total.total_bid_being //金额
                this.title_date = re.data.total.total_seller_num

               this.bidBeing = re.data.bidBeing.data
             
        }
       this.setCountDown();
      //console.log(this.bid_name)

  },
  mounted(){
            
  },
  
  methods:{

     //上下三角
    showTxt(index){
        let arr =[];
        if(this.tab == 20){
         arr = this.bidBeing;
        }else if(this.tab == 70){
         arr = this.bidDone;
        }else if(this.tab == 100){
         arr = this.bidColl;
        }
        if (arr[index].show_remark == false) {
          arr[index].show_remark = true;
        } else {
          arr[index].show_remark = false;
        }
        this.bidBeing = arr

    },
       //报名
       async enrollBid(e){  
            let bidId = e.currentTarget.getAttribute('data-bidid')
            let id = e.currentTarget.getAttribute('data-id')
            let arr = this.bidBeing;
            //tab 20 招标中 70已完成，100 已收藏
            let re = await this.$axios.post('bid/enrollBid',{
                bid_id:bidId
            });
             if(re.code == 200){
                    this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '报名成功',
                        icon: ''
                      }).show()
                  //改变报名按钮
                  arr[id].is_enlist = 1;
                  this.bidBeing = arr
                //未认证
                }else if(re.code == 201){
                  this.$router.push({path:'/register/status'})
                }else{
                    this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: re.msg,
                        icon: ''
                      }).show()
                }
        },
    //标书详情
      async toDetail(e){
        let that =this;
        let bidid = e.currentTarget.getAttribute('data-bidid')
        //let  tabnum  =  e.currentTarget.dataset.tabnum;
        let user_token = this.getUserToken()
        let res = await this.$axios.post('bid/getGoWhere',{
            bid_id:bidid,
            user_token:user_token
          })
            if(res.code == 200){
                this.$router.push({path:'/bid/'+res.data.toWhere,query: {
                bid_id: bidid,
                redirect:'/bid/typebidlist',
                bidtype:this.bidtype
               }})
            }
            
       },
    //tab 切换
    async tabChange(e){
      let  tab = e.currentTarget.getAttribute('data-tab')
      this.tab = tab;
     //获取数据
      let user_token = this.getUserToken()
      let res = await this.$axios.post('index/tabBidList',{
        tab:tab,
        user_token:user_token,
        bidtype:this.bidtype

      })
      if(res.code == 200){
          if(this.tab == 20){
               this.bidBeing = res.data.data
               this.bidBeingPage = res.data.page
          }else if(tab ==70){
               this.bidDone = res.data.data
               this.bidDonePage = res.data.page
          }else if(tab ==100){
               this.bidColl = res.data.data
               this.bidCollPage = res.data.page
          }
       }
       
    },
     //倒计时
   setCountDown(){
    let that =this
    let time = 1000;
    let lts = this.bidBeing;
         this.downTime = setInterval(function(){
          let list = lts.map(function (v, i){
            if (v.time1 <= 0) {
              v.time1 = 0;
            }
           let formatTime = that.getFormat(v.time1);
            v.time1 -= time;
            v.countDown = `${formatTime.hh}时${formatTime.mm}分${formatTime.ss}秒`;
            return v;

          })
            that.bidBeing = list

       }, time)
    },
    //下拉刷新
    // onPullingDown() {
    //   console.log(1111)

    //   this.$refs.scroll.forceUpdate()
    // },
      //上拉加载更多
      async onPullingUp() {
            clearInterval(this.downTime);
            let that = this;
            let tab = this.tab;
            let page = 1;
            let bidBeingPage = this.bidBeingPage
            let bidDonePage = this.bidDonePage
            let bidCollPage = this.bidCollPage
            let bidtype = this.bidtype;

            if(tab ==20){
                page = bidBeingPage+1;
              }else if(tab == 70){
                page = bidDonePage+1;
              }else if(tab == 100){
                page = bidCollPage+1;
              }
              //遮罩  
            const toast = this.$createToast({
              txt: '加载中...',
              //mask: true
            })
            toast.show()

              //获取数据
            let user_token = this.getUserToken()
            let re = await this.$axios.post('index/tabBidList',{
                tab:tab,
                user_token:user_token,
                page:page,
                bidtype:bidtype

              });

            if(re.code == 200){
                  if(tab == 20){
                         this.bidBeing = re.data.data
                         this.bidBeingPage = re.data.page
                         this.tab = 20
                  }else if(tab ==70){
                         this.bidDone = re.data.data
                         this.bidDonePage = re.data.page
                         this.tab = 70

                  }else if(tab ==100){
                         this.bidColl = re.data.data
                         this.bidCollPage = re.data.page
                         this.tab = 100

                  }
                  this.items = re.data.data
                  that.setCountDown();

              }
            toast.hide()
            this.$refs.scroll.forceUpdate()
      },
    reload(){
        this.isRouterAlive = false
        this.$nextTick(function(){
            this.isRouterAlive =true
        })
    }

  }

}
</script>